<script setup lang="ts">
import { ofPatientDataType } from '@/api/patient/type'
defineProps<{
  ofPatient: ofPatientDataType
  active?: number | null
  isbtn?: boolean
}>()

import { useClientStore } from '@/store/modules/clientStore'
const clientStore = useClientStore()
// 删除就诊人
const deletePatient = (id: string | number) => {
  ElMessageBox.confirm('是否删除该就诊人', '删除就诊人', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      clientStore.deePatient(id)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

import { useRouter } from 'vue-router'
const router = useRouter()
// 前往修改就诊人
const editPatient = (id: string | number) => {
  router.push({
    path: '/user/patient/a_u_patient',
    query: {
      id: id,
    },
  })
}
</script>

<template>
  <div class="content_card">
    <div class="content_card_title">
      <div class="content_card_title_info">
        <el-tag type="info" effect="plain">{{ ofPatient.isInsure === 1 ? '医保' : '自费' }}</el-tag>
        <span>{{ ofPatient.name }}</span>
      </div>
      <div class="content_card_title_btns" v-if="isbtn">
        <!-- 修改就诊人 -->
        <el-button type="primary" icon="Edit" circle @click="editPatient(ofPatient.id)" />
        <!-- 删除就诊人 -->
        <el-button type="danger" icon="Delete" circle @click="deletePatient(ofPatient.id)" />
      </div>
    </div>
    <div class="content_card_content">
      <div class="userinfo">
        证件类型：
        <span>{{ ofPatient.param?.certificatesTypeString }}</span>
      </div>
      <div class="userinfo">
        证件号码：
        <span>{{ ofPatient.certificatesNo }}</span>
      </div>
      <div class="userinfo">
        用户性别：
        <span>{{ ofPatient.sex === 0 ? '女生' : '男生' }}</span>
      </div>
      <div class="userinfo">
        出生日期：
        <span>{{ ofPatient.birthdate }}</span>
      </div>
      <div class="userinfo">
        手机号码：
        <span>{{ ofPatient.phone }}</span>
      </div>
      <div class="userinfo">
        婚姻状况：
        <span>{{ ofPatient.isMarry == 0 ? '未婚' : '已婚' }}</span>
      </div>
      <div class="userinfo">
        当前住址：
        <span>{{ ofPatient.param?.cityString }}</span>
      </div>
      <div class="userinfo">
        详细住址：
        <span>{{ ofPatient.param?.fullAddress }}</span>
      </div>
      <!-- 红色的已经选择的盒子 -->
      <transition name="confirm">
        <div class="confirm" v-if="ofPatient.id === active">已选择</div>
      </transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content_card {
  width: 31%;
  margin: 10px;
  flex-shrink: 0;
  box-shadow:
    2px 2px 7px #e6e6e6,
    -2px -2px 7px #e6e6e6;
  .content_card_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e5e5e5;
    padding: 20px;
    .content_card_title_info {
      display: flex;
      align-items: center;
      span {
        margin-left: 5px;
      }
    }
  }
  .content_card_content {
    padding-bottom: 20px;
    position: relative;
    .userinfo {
      margin: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        opacity: 0.8;
        font-size: 14px;
      }
    }
    .confirm {
      position: absolute;
      width: 200px;
      height: 200px;
      color: red;
      border-radius: 50%;
      border: 1px dashed red;
      text-align: center;
      line-height: 200px;
      left: 20%;
      top: 20%;
      opacity: 0.3;
      font-weight: 900;
      transform: rotate(35deg);
    }

    .confirm-enter-from {
      transform: scale(1) rotate(35deg);
    }

    .confirm-enter-active {
      transition: all 0.3s;
    }

    .confirm-enter-to {
      transform: scale(1.2) rotate(35deg);
    }
  }
}
</style>
